import { Button, Modal, TextContainer } from "@shopify/polaris";
import { useState, useCallback } from "react";
import styled from "./index.module.less";
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}
function ModalExample({ active, setActive }: Props) {
  const handleChange = useCallback(() => setActive(!active), [active]);

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>无法删除{"Cook"}</div>
      </div>
      <Modal.Section>
        <div className={styled.CHXPO}>
          <div>无法删除此客户,因为该客户有:</div>
          <div className={styled.SLKNDVB}>
            <div className={styled.asbdjk}></div>
            <div>个人订单</div>
          </div>
        </div>
      </Modal.Section>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        {/* <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            保存
          </Button>
        </div> */}
      </div>
    </Modal>
  );
}

export default ModalExample;
